import { App } from 'vue'
import XtxMore from './more/index.vue'
import { useIntersectionObserver } from '@vueuse/core'

export default {
  install (app: App) {
    // vue2 Vue.component 全局注册组件
    app.component(XtxMore.name, XtxMore)
    // console.log(XtxMore.name)

    // 注册全局自定义指令
    app.directive('lazy', {
      mounted (el, binding) {
        /**
         * 参数1：参数的目标
         * 参数2：箭头函数，里面有一个值是判断是否进入到了可视区域
         * 参数3：选项，滚动到监听的节点的最上面就触发监听，这个时候，把它的值设置为0
         */
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            // isIntersecting进入到可视区域为true，离开可视区域为false
            if (isIntersecting) {
              console.log('----isIntersecting---')
              // 当el，进入到可视区域的时候，才赋值
              el.src = binding.value

              // 停止对目标的监听
              stop()
            }
          },
          { threshold: 0 }
        )
      }
    })
  }
}
